import { StyledEditWrap, StyledTVWallWrap } from '../style'
import { Select, Button, Input, Space, Message } from '@kedacom/react-next'
import BoxConfig from './BoxConfig'
import { BoxInfoProps } from '../interface'
import TVWallContainer from '../context'
import Alert from '@/components/Alert'
import { fetchEditTVWall, fetchSaveTVWall } from '@/api/sysConfig/tvWallConfig'
import { SaveTVWallItem } from '@/api/sysConfig/tvWallConfig/interface'
import { fetchStatus } from '@/api/global'
import { transSaveTVWallParam } from '../translator'
import { t } from 'i18next'

export default function TvWallConfigEdit({ onCancel }: { onCancel: Function }) {
	const { state, dispatch } = TVWallContainer.useContainer()
	const { name, lineNum, columnNum, isApply } = state
	const PARENT_WIDTH = 900
	const PARENT_HEIGHT = 588
	const BOX_GAP = 20
	let list = []
	for (let i = 1; i <= 8; i++) {
		list.push({
			value: i,
			label: String(i),
		})
	}

	const applyConfig = () => {
		if (!isApply) {
			const { boxWidth, boxHeight, marginVertical, marginHorizontal } = getLayoutPara(lineNum, columnNum)
			let list: BoxInfoProps[] = []
			for (let i = 0; i < lineNum; i++) {
				for (let j = 0; j < columnNum; j++) {
					list.push({
						parent_box_width: PARENT_WIDTH,
						box_x: (boxWidth + BOX_GAP) * j + marginHorizontal,
						box_y: (boxHeight + BOX_GAP) * i + marginVertical,
						box_width: boxWidth,
						box_height: boxHeight,
						hdu_id: '',
						hdu_alias: '',
						channel_id: '',
					})
				}
			}
			dispatch({ type: 'changeBoxList', payLoad: list })
		}
		dispatch({ type: 'changeApplyState', payLoad: !isApply })
	}

	const getLayoutPara = (x: number, y: number) => {
		let num = x > y ? x : y
		let boxWidth = (PARENT_WIDTH - (num + 1) * BOX_GAP) / num
		let boxHeight = (boxWidth / 16) * 9
		let marginVertical = (PARENT_HEIGHT - (x - 1) * BOX_GAP - x * boxHeight) / 2
		let marginHorizontal = (PARENT_WIDTH - (y - 1) * BOX_GAP - y * boxWidth) / 2
		return {
			boxWidth,
			boxHeight,
			marginVertical,
			marginHorizontal,
		}
	}

	const handleSave = () => {
		if (name === '') {
			Alert(t('电视墙模板名称不能为空'))
			return
		}
		let params: SaveTVWallItem = transSaveTVWallParam(state)
		let m = Message.show({
			context: t('正在保存，请稍候……'),
			type: 'loading',
		})
		fetchStatus(() => {
			if (state.tvWallTemplateId !== '') {
				fetchEditTVWall(params, state.tvWallTemplateId).then((res) => {
					m.hide()
					if (res.success) {
						onCancel()
					} else {
						Alert(res.description ?? t('电视墙模板保存失败'))
					}
				})
			} else {
				fetchSaveTVWall(params).then((res) => {
					m.hide()
					if (res.success) {
						onCancel()
					} else {
						Alert(res.description ?? t('电视墙模板保存失败'))
					}
				})
			}
		})
	}

	return (
		<StyledEditWrap className="tvwall-config-edit">
			<div className="line">
				<span className="label">{t('电视墙名称：')}</span>
				<Input
					className="name-input"
					width={320}
					focusMsg={t('电视墙名称最多可输入32个字符')}
					maxLength={32}
					value={name}
					onChange={(e, v) => {
						dispatch({ type: 'changeTVWallName', payLoad: v })
					}}
				/>
			</div>
			<div className="line">
				<span className="label style-label">{t('电视墙风格：')}</span>
				<div>
					<div className="choice">
						<Select
							value={lineNum}
							options={list}
							width={60}
							disabled={isApply}
							onClick={(e, value) => {
								dispatch({ type: 'changeLineNum', payLoad: value })
							}}
						/>
						<span className="split">X</span>
						<Select
							value={columnNum}
							options={list}
							width={60}
							disabled={isApply}
							onClick={(e, value) => {
								dispatch({ type: 'changeColumnNum', payLoad: value })
							}}
						/>
						<Button className="btn" onClick={applyConfig}>
							{isApply ? t('重置') : t('应用')}
						</Button>
					</div>
					<div className="prompt">
						<span className="prompt-line">({t('行')})</span>
						<span className="prompt-column">({t('列')})</span>
					</div>
				</div>
			</div>
			<StyledTVWallWrap id="container" width={PARENT_WIDTH} height={PARENT_HEIGHT}>
				<BoxConfig></BoxConfig>
			</StyledTVWallWrap>
			<Space className="btn-wrap" space={5}>
				<Button className="save-btn" onClick={handleSave}>
					{t('保存')}
				</Button>
				<Button className="cancel-btn" onClick={() => onCancel()}>
					{t('取消')}
				</Button>
			</Space>
		</StyledEditWrap>
	)
}
